<template>
  <div>

    <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-between search-form">
        <div class="flex-grow-1">
          <el-select clearable class="w200px mr-3" v-model="queryForm.actionType" placeholder="请选择操作类型"
            autocomplete="off">
            <el-option label="远程控制" value="1"></el-option>
            <el-option label="远程升级" value="2"></el-option>
          </el-select>
          <el-button type="primary" plain @click="onRefresh()">查询</el-button>
          <el-button type="info" @click="onReset()" link>重置</el-button>
        </div>
        <div class="d-flex">
        </div>
      </div>
    </div>
    <div class="app_card pt-4  pb-5">
      <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
        height="calc(100vh - 300px)" sortable="custom" @sort-change="handleSortChange">

        <el-table-column label="IP" prop="ip" align="center">
          <template #default="scope">{{ scope.row.ip }}</template>
        </el-table-column>
        <el-table-column label="类型" prop="actionType" align="center">
          <template #default="scope">
            <el-tag effect="dark" :type="scope.row.actionType == 1 ? 'success' : 'danger'">{{ scope.row.actionType == 1 ?
              '远程控制' : '远程升级' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="content" align="center" width="600">
          <template #default="scope">{{ scope.row.content }}</template>
        </el-table-column>
        <el-table-column label="时间" prop="createTime" align="center" width="240">
          <template #default="scope">{{ resetForm('YYYY-mm-dd HH:MM:SS', scope.row.createTime) }}</template>
        </el-table-column>
      </el-table>
      <Pagination ref="paginationRef" @handleChange="handleChange" />

    </div>

  </div>
</template>

<script setup>
/**
 * 操作日志
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import Pagination from '@/components/pagination/index.vue';
import { resetForm } from '@/utils/EsDate.js';

// ======================================================
//                      变量声明
// ======================================================
const loading = ref(false);
// 表格查询参数
const queryForm = ref({
  actionType: "",
})

// 组件引用
const paginationRef = ref(null);
// 表格查询参数
const queryParam = ref({
  sort: "createTime",
  order: "desc",
  limit: 10,
  page: 1,
  query: 1,
})
// 表格数据
const dataOfTable = ref([]);


// ======================================================
//                      点击操作
// ======================================================
const onReset = () => {
  queryForm.value.actionType = ""
  onRefresh()
}
// 点击刷新按钮
const onRefresh = () => {
  queryParam.value.page = 1;
  paginationRef.value?.changeTotal({ totalCount: 0 })
  loadData();
}
// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData();
}
// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
  let _queryParam = queryParam.value

  _queryParam.query = ''
  if (queryForm.value.actionType) {
    _queryParam.query = "actionType=" + queryForm.value.actionType;
  }
  _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  loading.value = true
  EsAjax.post(ApiUrls.logControl, { ..._queryParam }).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { list, totalCount } = res.data.data
    dataOfTable.value = list;
    paginationRef.value?.changeTotal({ totalCount: totalCount })
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}


onMounted(() => {
  loadData();
})

</script>
